<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class</title>
</head>
<body>
    <button>点击唱歌</button>
<script>
    /* 1. 类的创建 */
    class Star{
        constructor(uname, age) {
            this.uname = uname
            this.age = age
        }
        sing(songTitle) {
            console.log(`${this.age} ${this.uname}song:${songTitle}`)
        }
    }
    var person = new Star('张三', 18)
    person.sing('借口')

    /* 2. 类的继承 */
    class Father {
        // constructor 里面的 this 指向的是 创建的实例对象
        constructor(uname, age) {
            this.uname = uname
            this.age = age
            this.btn = document.querySelector('button')
            this.btn.onclick = this.sing
        }
        money() {
            // 这个money里面的this 指向的是实例对象son因为它调用了这个方法
            console.log(100)
        }
        sing() {
            // 这个sing方法里的this指向的是btn这个按钮,因为这个按钮调用了这个函数
            console.log('sing...')
        }
    }
    class Son extends Father {}
    var son = new Son('jack', 18)
    son.money()

</script>
</body>
</html>